<template>
  <div class="user-wrapper user-change-phone">
    <div class="user-title">
      <van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'user-account' }" />
      {{ $t('User.change_pw') }}
    </div>
    <div class="change-phone-form">
      <p class="form-label">{{ $t('User.phone_number') }}</p>
      <van-field
        v-model="phoneNumber"
        :placeholder="$t('User.input_phone_tip')"
        :rules="[{ required: true, message: $t('User.input_phone_msg') }]"
        clearable
      />
      <p class="form-label">验证码</p>
      <van-field
        v-model="validateCode"
        type="text"
        :name="$t('User.validate_code')"
        :placeholder="$t('User.validate_code_tip')"
        :rules="[{ required: true, message: $t('User.validate_code_msg') }]"
        clearable
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          @click="getCode">{{ $t('User.send_validate_code') }}</van-button>
      </van-field>
      <p class="form-label">{{ $t('User.new_pw') }}</p>
      <van-field
        :type="fieldType"
        v-model="password"
        :placeholder="$t('User.input_pw_msg')"
        :rules="[{ required: true, message: $t('User.input_pw_msg') }]"
        clearable
      >
      <van-button
          slot="button"
          size="small"
          class="eye-icon"
          @click="changeFieldType">
          <van-icon v-if="changeFieldType === 'password'" name="closed-eye" />
          <van-icon v-else name="eye-o" />
          </van-button>
      </van-field>
      <van-button
        class="block-btn"
        block>
        {{ $t('User.submit') }}
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      validateCode: '',
      password: '',
      fieldType: 'password',
    };
  },
  methods: {
    onSubmit() {

    },
    getCode() {

    },
    changeFieldType() {

    }
  }
};
</script>

<style lang="less" scoped>
  .user-change-phone{
    background: #fff;
  }
  .change-phone-form{
    padding: 40px;
  }
  .form-label{
    margin: 30px 0 16px;
  }
  .van-field,
  .eye-icon{
    background: #f6f6f6;
  }
  .eye-icon{
    min-width: 50px;
  }
  .block-btn{
    margin: 50px auto;
  }
</style>
